<style scoped>
  * {
  touch-action:none !important;
}
  .menuContainer {
    width: 900px;
    height: 500px;
    border: solid 1px #333;
    overflow: hidden;
    padding: 0px;
    padding-right: 20px;
    margin-right: auto;
    margin-left: auto;
    margin: 0px;
  }

  .metro-layout .box {
    box-shadow: #111 0px 0px 5px;

  }

  .metro-layout .box span {
    font-size: 25px !important;

  }

  .metro-layout .items {
    margin-left: 10px !important;
    padding: 0 20px !important;
  }

  .metro-layout .box .icon {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -62px;
    margin-top: -62px;
    z-index: 7;
    font-size: 26px;
  }

  .swiper-container {

    height: 1350px !important;
  }

  .swiper-pagination-bullet {

    width: 90px !important;
    height: 90px !important;
    margin: 0 80px !important;
  }
</style>
<style>
  .swiper-pagination-bullet {

    width: 90px !important;
    height: 90px !important;
    margin: 0 60px !important;
  }
  .metro-layout .box{
    width: 585px !important;
    height: 195px !important;
    margin-left: 10px !important;
  }
</style>
<style scoped src="../../static/css/metro.css"></style>
<script>
  import {
    swiper,
    swiperSlide
  } from 'vue-awesome-swiper'
import loginVue from './login.vue';
</script>

<template>
  <!--页面主体，内容区域-->
  <div class="content">

    <div class="body">
      <div class="frame">

        <!-- <div style="text-align: center">
          <span style="font-size:30px;color:green;font-weight: bold">当前为解锁状态</span>
      </div> -->
        <div class="metro-layout horizontal" style="padding-top:5px">


          <div class="content clearfix" v-if="module_list.length>1">

              <a class="box"  v-bind="w" v-for="(item,index) in module_list" :value="index"  href="javascript:void(0)" @click="go(getMenuInfo(item.ModuleCode).toPageUrl)" :style="'background:' + getMenuInfo(item.ModuleCode).color" >
                  <span>{{item.ModuleName}}</span>
                  <div class="icon">
                    <i :class="'fa '+ getMenuInfo(item.ModuleCode).iconUrl +' fa-4x'"></i>
                  </div>
                </a>  


            <!-- <a class="box"   href="javascript:void(0)" @click="go('warningManagement')" style="background: #4c5e51" >
              <span>预警数据</span>
              <div class="icon">
                <i class="fa fa-exclamation-triangle  fa-4x"></i>
              </div>
            </a>   
            <a class="box"   href="javascript:void(0)" @click="go('camera')" style="background: #3c5b9b">
              <span>视频监控</span>
              <div class="icon">
                <i class="fa fa-id-card  fa-4x"></i>
              </div>
            </a>   
            <a class="box"   href="javascript:void(0)" @click="go('warningConfig')" style="background: #ffc808">
              <span>参数设置</span>
              <div class="icon">
                <i class="fa fa-snowflake-o  fa-4x"></i>
              </div>
            </a>    
            <a class="box"   href="javascript:void(0)" @click="go('about')" style="background: #640f6c">
              <span>关于本柜</span>
              <div class="icon">
                <i class="fa fa-info-circle  fa-4x"></i>
              </div>
            </a>   -->



          </div>

        </div>
        <!-- <button class="btn btn-danger btn-lg btn-bottom-right" style="top:885px !important;left: 150px !important;width: 285px !important;" @click="btnLogout" type="button">注销认证</button> -->
      </div>
    </div>
  </div>

</template>
<script>
  export default {
    extends: extend,
    name: "menu",
    data:function() {
      return {
        swiperOption: {
          disableScroll: true,
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          }
        },
        pageTitle: "认证成功",
        timeStr: "",
        dateStr: "",
        userInfoText: "",
        module_list: '',
        countDownTimerMax: 180,
        use: 0,

      };
    },
    computed: {

    },
    methods: {
      tan: function () {
        alert("fdfdf");

      },

      userModuleCallBack: function(obj){
        if(obj.status==0){

          this.module_list=new Array();
          var allMoudule=['WarningData','Camera','WarningConfig','About'];
          for (let index = 0; index < obj.data.length; index++) {
          const element = obj.data[index];
          if(allMoudule.indexOf(element.ModuleCode)!=-1)
          {
            this.module_list.push(element);
          }
            
        }
        }
      },
      btnLogout:function(){

        this.go("/standby");
      },
      getMenuInfo: function (moduleCode) {
        switch (moduleCode) {
          case "DrugUse":
            {
              return {
                iconUrl: 'fa-hand-lizard-o',
                toPageUrl: "/reagentUse",
                color:'#4c5e51',
                shape: 'height2'
              };
            }
          case "DrugReturn":
            {
              return {
                iconUrl: 'fa-share-square-o',
                toPageUrl: "/reagentReturn",
                color: '#3c5b9b',
                shape: ''
              };
            }
          case "DrugPutIn":
            {
              return {
                iconUrl: 'fa-plus-square',
                toPageUrl: "/reagentPut",
                color: '#ffc808',
                shape: ''
              };
            }
          case "MyDrug":
            {
              return {
                iconUrl: 'fa-cubes',
                toPageUrl: "/myReagent",
                color: '#00a9ec',
                shape: ''
              };
            }
          case "DataReport":
            {
              return {
                iconUrl: 'fa-bar-chart-o',
                toPageUrl: "/stockManagement",
                color: '',
                shape: 'width2'
              };
            }
          case "DrugView":
            {
              return {
                iconUrl: 'fa-search',
                toPageUrl: "/reagentSearch",
                color: '#f874a4',
                shape: ''
              };
            }
          case "WarningData":
            {
              return {
                iconUrl: 'fa-exclamation-triangle',
                toPageUrl: "/warningManagement",
                color: '#4c5e51',
                shape: ''
              };
            }
          case "UserManage":
            {
              return {
                iconUrl: 'fa-users',
                toPageUrl: "/userManagement",
                color: '#3c5b9b',
                shape: ''
              };
            }
            case "RemoteManage":
            {
              return {
                iconUrl: 'fa-wifi',
                toPageUrl: "/remoteManage",
                color: '#4c5e51',
                shape: ''
              };
            }
          case "Camera":
            {
              return {
                iconUrl: 'fa-video-camera',
                toPageUrl: "/camera",
                color: '#3c5b9b',
                shape: ''
              };
            }
            case "WarningConfig":
            {
              return {
                iconUrl: 'fa-snowflake-o',
                toPageUrl: "/warningConfig",
                color: '#ffc808',
                shape: ''
              };
            }
          case "About":
            {
              return {
                iconUrl: 'fa-info-circle',
                toPageUrl: "/about",
                color: '#640f6c',
                shape: ''
              };
            }
          case "SysSetting":
            {
              return {
                iconUrl: 'fa-snowflake-o',
                toPageUrl: "/sysMaintenance",
                color: '#ffc808',
                shape: ''
              };
            }
            case "WarningConfig":
            {
              return {
                iconUrl: 'fa-cog',
                toPageUrl: "/warningConfig",
                color: '',
                shape: ''
              };
            }
          case "QiutSystem":
            {
              return {
                iconUrl: 'fa-cog',
                toPageUrl: "/QuitSystem",
                color: '#0e010f',
                shape: ''
              };
            }
          default:
            {
              return {};
            }
        }
      },

      //菜单功能————————————————————————————————————————————————————————————————————————————————————————————————————
      menuPage: function (pageIndex) {
        return this.menuList.slice(pageIndex * 6, pageIndex * 6 + 6);
      },
      menuRow: function (pageIndex, rowIndex) {
        return this.menuPage(pageIndex).slice(rowIndex * 2, rowIndex * 2 + 2);
      },
      menuTd: function (pageIndex, rowIndex, tdIndex) {
        var obj = this.menuRow(pageIndex, rowIndex)[tdIndex];
        var code = obj.moduleCode;
        var info = this.getMenuInfo(code);
        info.text = obj.moduleName;
        info.code = code;
        return info;
      },


      afterPageClickEvent: function () {
        this.menuPageCurIndex--;
        if (this.menuPageCurIndex < 0) {
          this.menuPageCurIndex = this.menuPageLength - 1;
        }
        setMenuIndex(this.menuPageCurIndex);
      },
      nextPageClickEvent: function () {
        this.menuPageCurIndex++;
        if (this.menuPageCurIndex == this.menuPageLength) {
          this.menuPageCurIndex = 0;
        }
        setMenuIndex(this.menuPageCurIndex);
      },

      //用户自定义方法————————————————————————————————————————————————————————————————————————————————————————————————
      initMenu: function () {
        var jsonStr = ClientApi.GetSysModule();
        this.menuList = JSON.parse(jsonStr).Data;

        //菜单切换缓存处理
        try {
          var index = getMenuIndex();
          if (index) {
            this.menuPageCurIndex = index;
          } else {
            this.menuPageCurIndex = 0;
          }
        } catch (e) {
          this.menuPageCurIndex = 0;
        }

        sessionStorage.removeItem("useReagentData");
        sessionStorage.removeItem("useReagentDoorStatus");
        sessionStorage.removeItem("returnReagentList");
        sessionStorage.removeItem("putTmpData");
        sessionStorage.removeItem("putCurTmpIndex");
        sessionStorage.removeItem("putCurReagentIndex");
        sessionStorage.removeItem("userList");
        sessionStorage.removeItem("curUser");
      },
      //关机
      closeSystem: function () {
        this.popupYNAlert("关闭", "是否关闭电源？", 3000, function () {
          ClientApi.CloseSystem();
        });
      },
      //退出系统
      quitSystem: function () {
        this.$toast.error("dsdsddddddd");
        
        // this.$confirm('确定要退出系统？', '提示', {
        //         type: 'warning'
        //       }).then(function (result) {
        //         if (result) {

        //         }
        //       });
      },
      isAdmin: function () {
        var obj = JSON.parse(ClientApi.IsAdmin());
        if (obj.Status == 1) {
          return "ok";
        } else {
          return "no";
        }
      },
      changeLayoutMode: function () {
        var $layout = $('.metro-layout');
        var isHorizontal = false;
        $('.items', $layout).removeAttr('style');
        if (isHorizontal) {
          $('.items', $layout).css({
            width: $('.items', $layout).outerWidth()
          })
        } else {
          $('.items', $layout).css({
            width: 'auto'
          })
        }
      }
    },
    mounted: function () {
    
      var UserId = this.$parent.userInfo.UserId;
      P_User.userPower(UserId);
      //解除document的条码扫描监测事件绑定
      $(document).unbind("barCodeScanerModeEnter");
      //window.$('.numkeyboard').unbind("keyboard");
      P_ClientCom.useClient();
      P_Client.closeVideoDisplay();
    }
  };
</script>